<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>奇特物联登录授权</title>
		<style type="text/css">
			body{
				min-height: 500px;
			    background: linear-gradient( 270deg, rgb(46 124 255) 0%, rgb(52 3 65) 100% );
			}
			.bgimg{
				position:absolute;
				width:100%;
				height:100%;
			}
			.bgimg::before {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 60%;
				overflow: hidden;
				height: 80%;
				-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='1200' height='770' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg%3E%3Cpath id='svg_1' d='M58.4 47.77C104.6 59.51 135.26 67.37 162.11 78.04C188.97 88.72 226.33 102.69 265.92 123.55C305.51 144.4 366.96 167.09 441.43 121.52C515.9 75.95 546.48 61.01 577.69 46.27C608.9 31.53 625.86 23.69 680.26 12.28C734.65 0.87 837.29 10.7 867.29 21.8C897.29 32.9 935.51 51.9 962.21 95.45C988.9 139.01 972.91 177.36 951.37 221.39C929.83 265.43 883.49 306 890.44 337.33C897.4 368.66 974.73 412.18 974.73 411.47C974.73 412.18 1066.36 457.62 1106.36 491.06C1146.36 524.5 1178.8 563.36 1184.03 579.63C1189.26 595.9 1200.4 622.49 1181.55 676.88C1162.71 731.26 1127.16 764.32 1115.31 778.64C1103.45 792.96 5.34 783.61 4.32 784.63C3.3 785.65 -172.34 2.38 1.13 35.04L58.4 47.77L58.4 47.77Z' fill='%23409eff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
				background: #2e72f08f;
				transition: all .3s ease;
			}
			.bgimg::after {
				content: "";
				width: 150px;
				height: 300px;
				position: absolute;
				right: 0;
				top: 0;
				-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='150' height='300' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg%3E%3Cpath id='svg_1' d='M-0.56 -0.28C41.94 36.17 67.73 18.94 93.33 33.96C118.93 48.98 107.58 73.56 101.94 89.76C96.29 105.96 50.09 217.83 47.87 231.18C45.64 244.52 46.02 255.2 64.4 270.05C82.79 284.91 121.99 292.31 111.98 289.81C101.97 287.32 153.96 301.48 151.83 299.9C149.69 298.32 149.98 -1.36 149.71 -1.18C149.98 -1.36 -43.06 -36.74 -0.56 -0.28L-0.56 -0.28Z' fill='%23409eff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
				background: #330b4e8c;
				transition: all .3s ease;
			}

			*{margin: 0px; padding: 0px;}
			.login-box{
				position: absolute;
				right: 100px;
				width: 400px;
				height: 400px;
				margin: 20vh auto;
				padding: 30px 50px;
				background-color: #fff;
				overflow: inherit;
				border-radius: 10px;
			}
			.login-box .title{color:#333;font-size:22px;text-align:center;margin:20px 20px}
			.login-box .form{list-style:none; padding:20px 20px;}
			.login-box li{
				padding:10px 10px;
				line-height:30px;
				text-align:center;
			}
			.login-box input{
				width:100%;
				line-height: 30px;
				margin-bottom: 10px;
				border-radius: 5px;
				border: 1px solid #999;
				padding:5px 10px;
			}
			.login-box button{
				padding: 5px 15px;
				cursor: pointer;
				width: 100%;
				line-height:30px;
				border: 1px solid #5e77ff;
				background-color: #5e77ff;
				color: #fff;
				border-radius: 5px;
			}
			.login-box button:hover{
				background-color: #2746f1;
			}
			.login-box .tip{
				margin-top:20px;
				color:#666;
			}
			.tip.error{
				color:red;
			}
			#loginImg{
				-webkit-animation:bounce 3s 1s infinite linear normal;
				-moz-animation:bounce 3s 1s infinite linear normal;}
				@-webkit-keyframes bounce{
				40%{-webkit-transform:translateY(-20px)}
				60%{-webkit-transform:translateY(-10px)}
				}
			}
		</style>
	</head>
	<body>
		<div class="bgimg">
			<div style="position:absolute;top:40px;left:100px;font-size:30px;color:#FFF">©奇特物联</div>
			<img id="loginImg" src="http://iotkit-img.oss-cn-shenzhen.aliyuncs.com/product/KdJYpTp5ywNhmrmC/cover.png?Expires=1970997977&OSSAccessKeyId=LTAI5t8UFEH5eGrBUS5zSiof&Signature=0YV5y27iIYYL5XQ2qMeBV%2FloYFU%3D" style="position: absolute;left:100px;bottom: -20px;"/>
		</div>
		<div class="login-box">
			<div class="title">登录授权</div>
			<ul class="form">
				<li>
					<input name="name" placeholder="请输入账号"/>
				</li>
				<li>
					<input name="pwd" type="password" placeholder="请输入密码" /> <br>
				</li>
				<li>
					<button onclick="doLogin()">登录</button>
				</li>
				<li class="tip" id="liTip"></li>
				<li style="color:#aaa;">
					Copyright © 2021 － 2022 奇特物联
				</li>
			</ul>
		</div>
		<script src="https://unpkg.zhimg.com/jquery@3.4.1/dist/jquery.min.js"></script>
		<script>window.jQuery || alert('当前页面CDN服务商已宕机，请将所有js包更换为本地依赖')</script>
		<script type="text/javascript">
			// 登录方法
			function doLogin() {
				var name=$.trim($('[name=name]').val());
				var pwd=$.trim($('[name=pwd]').val());
				if(!name || !pwd){
					$("#liTip").addClass("error").text("账号或密码不能为空!");
				}
				$.ajax({
					url: '/oauth2/doLogin',
					data: {
						name: name,
						pwd: pwd
					},
					dataType: 'json', 
					success: function(res) {
						if(res.code == 200) {
							$("#liTip").removeClass("error").text("登录成功!");
							setTimeout(function() {
								location.reload(true);
							}, 800);
						} else {
							$("#liTip").addClass("error").text(res.msg);
						}
					},
					error: function(e) {
						console.log('error');
					}
				});
			}
		</script>
	</body>
</html>
